import CountUp from "react-countup";
import {
  AmountStyle,
  IndexStyle,
  NameStyle,
  TransactionAmountRankItemWrap,
} from "./styles";
import React from "react";
import { getPrimaryColor } from "./getPrimaryColor";

export interface TransactionAmountRankItemProps {
  /**
   * 排名 1开始
   */
  index?: number;
  name?: string;
  amount?: number;
  unitName?: string;
  indexStyle?: React.CSSProperties;
  containerStyle?: React.CSSProperties;
}

const TransactionAmountRankItem = ({
  index = 1,
  name = "",
  amount = 0,
  unitName = "",
  indexStyle,
  containerStyle,
}: TransactionAmountRankItemProps) => {
  const primaryColor = getPrimaryColor(index);

  const isDark = index % 2 == 0;
  const containerBg = isDark
    ? `linear-gradient(
    to right,
    rgba(17, 28, 60, 0),
    #111c3c,
    rgba(17, 28, 60, 0)
  )`
    : `linear-gradient(
    to right,
    rgba(59,74,119,0)
,
    #3B4A77,
    rgba(59,74,119,0)

  )`;

  return (
    <TransactionAmountRankItemWrap
      containerBg={containerBg}
      style={containerStyle}
    >
      <IndexStyle primaryColor={primaryColor} style={indexStyle}>
        {index}
      </IndexStyle>
      <NameStyle>{name}</NameStyle>
      <AmountStyle primaryColor={primaryColor}>
        <CountUp start={0} end={amount} decimals={2} />
        {unitName}
      </AmountStyle>
    </TransactionAmountRankItemWrap>
  );
};

export default TransactionAmountRankItem;
